<template>
  <div class="demo">
    <h2>名字{{ Name }}</h2>
    <h2>性别:{{ sex }}</h2>
    <h2>当前求和为：{{ number }}</h2>
    <button @click="add">number++</button>
    <button @click="sendStudentName">把学生名给App</button>
    <button @click="unbind">解绑atguigu事件</button>
    <button @click="death">销毁当前Student组件的实例(vc)</button>
  </div>
</template>

<script>
export default {
  name: "MyStudent",
  data() {
    return {
      Name: "张三",
      sex: "男",
      number: 0,
    };
  },
  methods: {
    add() {
      this.number++;
    },
    sendStudentName() {
      // 触发student组件实例身上的atguigu事件
      this.$emit("atguigu", this.Name);
      this.$emit("demo");
    },
    unbind() {
      this.$off("atguigu"); //解绑一个自定义事件
      this.$off(["atguigu", "demo"]); //解绑多个自定义事件
      this.$off(); //解绑所有自定义事件
    },
    death() {
      this.$destroy(); //销毁当前Student组件实例
    },
  },
};
</script>
<!--  scoped可以让style属性只负责这一个文件 -->
<style scoped>
.demo {
  background-color: yellow;
}
</style>
